<template>
  <div>
    <div class="header">
      <h2>{{title}}</h2>
      <p>{{content}}</p>
    </div>
    <div class="container">
      <div class="image-container" v-for="(item, index)  in imgList" v-bind:key="index">
        <OSSUploadImage v-bind:imageItem="item"/>
        <div class="del-button" v-if="item && item.showDelete" v-on:click="onDelete(index)">x</div>
      </div>
      <label class="upload-button">上传文件
        <input type="file" v-on:change="selectPhoto"
               accept="image/png, image/jpeg, image/gif, image/jpg">
      </label>
    </div>
  </div>
</template>

<script>
import OSSUploadImage from './OSSUploadImage'

export default {
  name: 'OSSUpload',
  components: {OSSUploadImage},
  props: {
    imgList: Array,
    title: String,
    content: String,
  },
  data: function () {
    return {
      tempFile: null,
    }
  },
  methods: {
    selectPhoto: function (event) {
      this.$emit('onFileSelected', event.target.files[0])
      event.target.value = null
    },
    onDelete: function (item) {
      this.$emit('onImageDelete', item)
    },
  }
}
</script>

<style scoped>

  .header {
    display: flex;
    align-items: baseline;
    border-bottom: 2px solid #ddd;
  }

  .header p {
    margin-left: 20px;
  }

  .upload-button {
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    margin-top: 10px;
  }

  .upload-button input {
    visibility: hidden;
  }

  .container {
    display: flex;
    justify-content: flex-start;
    padding: 10px;
    overflow: hidden;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
  }

  .container img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    margin-top: 10px;
    border: 1px #ddd solid;
  }

  .image-container {
    position: relative;
  }

  .image-container .del-button {
    width: 28px;
    height: 28px;
    text-align: center;
    position: absolute;
    right: 6px;
    top: 6px;
    background: #f00;
    font-size: 22px;
    border-radius: 50%;
    /*border: 2px solid #fff;*/
    color: #fff;
  }

</style>
